<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header card-header-inverse">
                <h4 class="card-header-title">
                    系统模块
                </h4>
            </div>
            <div class="card-content table-full-width">
                <div class="toolbar">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-12 col-md-12">
                                <div class="form-group label-floating is-empty" style="margin-top: 2%; margin-left: 40%">
                                    <button class="btn btn-success btn-sm" id="btn_expandAll">
                                        <i class="fa fa-plus"></i> 展开
                                    </button>
                                    <button class="btn btn-red btn-sm" id="btn_collapseAll">
                                        <i class="fa fa-cog"></i> 折叠
                                    </button>
                                    <button class="btn btn-primary btn-sm" id="btn_refresh">
                                        <i class="fa fa-refresh"></i> 刷新
                                    </button>
                                    <!--button class="btn btn-danger btn-sm" id="btn_trash" data-ids="">
                                        <i class="fa fa-trash-o"></i> 删除
                                    </button -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="material-datatables">
                    <div id="procitytree"><div class="dataTables_empty" valign="top"><h4>数据加载中...</h4></div></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-inverse">
                        <h4 class="card-header-title">
                            模块信息
                        </h4>
                    </div>
                    <div class="card-body">
                        <form class="pageForm" method="post" action="<?= \yii\helpers\Url::to(['/module/update-module'])?>" data-validator-option="{theme: 'yellow_top',timely:2, focusCleanup:true}">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">模块类型</label>
                                        <select name="txt_CLASSID" class="form-control form-control-sm" data-style="select-with-transition" data-size="7">
                                            <option value="0">系统模块</option>
                                            <option value="1">导航菜单</option>
                                            <option value="2">执行动作</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">模块名称</label>
                                        <input type="text" name="txt_TITLE" class="form-control form-control-sm" data-rule="模块名称:required;length(2~32)" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">模块地址</label>
                                        <input type="text" name="txt_ROUTEURL" class="form-control form-control-sm" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">样式名称</label>
                                        <input type="text" name="txt_STYLE" class="form-control form-control-sm" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">图标样式</label>
                                        <input type="text" name="txt_ICON" class="form-control form-control-sm" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">其他选项</label>
                                        <textarea rows="3" name="txt_OPTIONS" class="form-control form-control-sm"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">排序数值</label>
                                        <input type="text" name="txt_SORTID" class="form-control form-control-sm" data-rule="排序数值:integer(+0);length(1~4)" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <div class="checkbox">
                                            <input type="checkbox" name="txt_Nullity" id="txt_Nullity" value="1">
                                            <label for="txt_Nullity">
                                                是否启用
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="txt_ID" value="" />
                            <input type="hidden" name="txt_PID" value="" />
                            <button type="submit" class="btn btn-fill btn-primary pull-right">保存模块</button>
                            <div class="clearfix"></div>
                        </form>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="fa fa-warning text-warning"></i> 默认没有选中任何左边模块项则为创建根模块项
                        </div>
                    </div>
                </div>
            </div>
        </div><br>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-inverse">
                        <h4 class="card-header-title">
                            创建模块
                        </h4>
                    </div>
                    <div class="card-body">
                        <form class="pageForm" method="post" action="<?= \yii\helpers\Url::to(['/module/update-module'])?>" data-validator-option="{theme: 'yellow_top',timely:2, focusCleanup:true}">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">模块类型</label>
                                        <select name="txt_CLASSID" class="form-control form-control-sm" data-style="select-with-transition" data-size="7">
                                            <option value="0">系统模块</option>
                                            <option value="1">导航菜单</option>
                                            <option value="2">执行动作</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">模块名称</label>
                                        <input type="text" name="txt_TITLE" class="form-control form-control-sm" data-rule="模块名称:required;length(2~32)" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">模块地址</label>
                                        <input type="text" name="txt_ROUTEURL" class="form-control form-control-sm" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">样式名称</label>
                                        <input type="text" name="txt_STYLE" class="form-control form-control-sm" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">图标样式</label>
                                        <input type="text" name="txt_ICON" class="form-control form-control-sm" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">其他选项</label>
                                        <textarea rows="3" name="txt_OPTIONS" class="form-control form-control-sm"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <label class="control-label">排序数值</label>
                                        <input type="text" name="txt_SORTID" class="form-control form-control-sm" data-rule="排序数值:integer(+0);length(1~4)" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group label-floating is-empty is-info">
                                        <div class="checkbox">
                                            <input type="checkbox" name="txt_Nullity" id="txt_Nullity" value="3" checked="checked">
                                            <label for="txt_Nullity">
                                                是否启用
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="txt_ID" value="" />
                            <button type="submit" class="btn btn-fill btn-primary pull-right">创建模块</button>
                            <div class="clearfix"></div>
                        </form>
                    </div>
                    <div class="card-footer">
                        <div class="stats">
                            <i class="fa fa-warning text-warning"></i> 默认没有选中任何左边模块项则为创建根模块项
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.selectpicker').selectpicker();
        var _tree_ = $('#procitytree');
        var initModel = function () {
            //that.perfectScrollbar();
            $.ajax({
                type: "POST",
                url: "/module/get-node",
                dataType: "json",
                success: function (data) {
                    if (!data || data.length == 0) {
                        _tree_.html('<div class="dataTables_empty" valign="top">没有匹配结果</div>');
                        return false;
                    }
                    _tree_.treeview({
                        expandIcon: 'fa fa-fw fa-plus-square-o',
                        collapseIcon: 'fa fa-fw fa-minus-square-o',
                        emptyIcon: 'fa fa-fw',
                        checkedIcon: 'fa fa-fw fa-dot-circle-o',
                        uncheckedIcon: 'fa fa-fw fa-circle-o',
                        onhoverColor: "#f5f5f5",
                        selectedBackColor: "#faf2cc",
                        selectedColor: "rgba(0,0,0,.87)",
                        data: data,
                        showCheckbox: true,
                        showTags: true,
                        onNodeExpanded: function (event, node) {
                            //that.perfectScrollbar('update');
                        },
                        onNodeCollapsed: function (event, node) {
                            //that.perfectScrollbar('update');
                        },
                        onNodeSelected: function (event, node) {
                            nodefn("toggleNodeChecked", node);
                            var arrs = [];
                            getchild(node, arrs);
                            $("#btn_trash").attr("data-ids", arrs.join(","));
                            $.get("/module/get-module?id=" + node.id, function (d) {
                                if (d) {
                                    var t;
                                    for (var i in d) {
                                        t = $("[name='txt_" + i.toUpperCase() + "']");
                                        if (t.hasClass('selectpicker')) {
                                            $('.selectpicker').selectpicker('val', d[i]);
                                        } else if (t.prop('type') === "checkbox") {
                                            t.prop({ "checked": (!d[i]), "value": (d[i] ? 1 : 0) });
                                        } else {
                                            t.val(d[i]);
                                        }
                                    }
                                }
                            });
                        },
                        onNodeChecked: function (event, node) {
                            nodefn("toggleNodeSelected", node);
                        },
                        onNodeUnselected: function (event, node) {
                            nodefn("toggleNodeChecked", node);
                        },
                        onNodeUnchecked: function (event, node) {
                            nodefn("toggleNodeSelected", node);
                        }
                    }).treeview('collapseAll', { silent: true });

                    function nodefn(evt, node) {
                        if (!node) return false;
                        _tree_.treeview(evt, [node.nodeId, { silent: true }]);
                        if (node.nodes && node.nodes.length > 0 && !node.state.expanded) {
                            _tree_.treeview("expandNode", node.nodeId);
                        }
                    };

                    function getchild(node, arrs) {
                        if (!node || node.length == 0) return false;
                        arrs.push(node.id);
                        if (node.nodes && node.nodes.length > 0) {
                            for (var i in node.nodes) {
                                getchild(node.nodes[i], arrs);
                            }
                        }
                    };
                }
            });
        };

        initModel();

        $(document).off("click", "#btn_refresh").on("click", "#btn_refresh", function () {
            initModel();
        });

        $("[name='txt_NULLITY']").each(function () {
            $(this).click(function () {
                var chk = $(this);
                chk.prop({ "checked": chk.is(":checked"), "value": (chk.is(":checked") ? 0 : 1) });
            });
        });

        $(document).off("click", "#btn_trash").on("click", "#btn_trash", function () {
            var $ids = $(this).data('ids');
            if ($ids.length == 0) {
                swal('操作失败！', "请选中需要操作的节点模块！", 'error');
                return false;
            }
            swal({
                type: 'question',
                title: '确认操作？',
                text: "请确认是否继续此项操作，此操作不可逆！",
                showCancelButton: true
            }).then(function () {
                $.post("/module/handler-module/", { ids: $ids }, function (d) {
                    if (d.statusCode === 200) {
                        swal('操作成功！', d.message, 'success');
                        initModel();
                        return false;
                    }
                    swal('操作失败！', d.message, 'error');
                });
            }, function (dismiss) { });
        });

        $(document).off("click", "#btn_expandAll").on("click", "#btn_expandAll", function () {
            _tree_.treeview('expandAll', { silent: true });
        });

        $(document).off("click", "#btn_collapseAll").on("click", "#btn_collapseAll", function () {
            _tree_.treeview('collapseAll', { silent: true });
        });

        //$("form.pageForm").createSubmit();
        $("form.pageForm").createSubmit(function () {
            //_this.ajaxTables(pageURL, columns, null, options);
            initModel();
        });
    });
</script>
